<div class="card">
   <div class="card-header">
     <h6 class="card-title">用户注册</h6>
   </div>

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon1">用户名</span>
    </div>
    <input [(ngModel)]="u.username" type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
  </div>

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon2">密码</span>
    </div>
    <input [(ngModel)]="u.pass" type="password" class="form-control"  aria-label="Username" aria-describedby="basic-addon1">
  </div>

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon3">重复密码</span>
    </div>
    <input [(ngModel)]="repass" type="password" class="form-control"  aria-label="Username" aria-describedby="basic-addon1">
  </div>

  <div class="row">
    <div class="col">
      <div ngbDropdown class="d-inline-block">
        <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>头像选择</button>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">

          <img ngbDropdownItem src="assets/imgs/head/h1.png" height="80px" width="80px" (click)="onHeadImgSelect('1')"/>
          <img ngbDropdownItem src="assets/imgs/head/h2.png" height="80px" width="80px" (click)="onHeadImgSelect('2')"/>
          <img ngbDropdownItem src="assets/imgs/head/h3.png" height="80px" width="80px" (click)="onHeadImgSelect('3')"/>
          <img ngbDropdownItem src="assets/imgs/head/h4.png" height="80px" width="80px" (click)="onHeadImgSelect('4')"/>
          <img ngbDropdownItem src="assets/imgs/head/h5.png" height="80px" width="80px" (click)="onHeadImgSelect('5')"/>
          <img ngbDropdownItem src="assets/imgs/head/h6.png" height="80px" width="80px" (click)="onHeadImgSelect('6')"/>
          <img ngbDropdownItem src="assets/imgs/head/h7.png" height="80px" width="80px" (click)="onHeadImgSelect('7')"/>
          <img ngbDropdownItem src="assets/imgs/head/h8.png" height="80px" width="80px" (click)="onHeadImgSelect('8')"/>
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <img ngbDropdownItem src="{{u.headimg}}" height="80px" width="80px"/>
    </div>

</div>

  <div class="card-footer">
    <button class="btn btn-primary" (click)="save()">保存</button>
    <button class="btn btn-danger">取消</button>
  </div>



</div>
